<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin:0;
        }
        #app>div {
            border-radius: 50%;
            position: absolute;/*绝对定位*/
            width: 100px;
            height: 120px;
            transform: rotate(5deg);
            /* inset内阴影 */
            box-shadow: -8px -8px 80px -8px #873940 inset;
        }

        #app>div::after{ /*伪元素*/
            display: block;
            content: "";
            position: absolute;
            bottom:-8px;
            right: 50px;
            border: 8px solid transparent;/*透明*/
            border-right-color:  #873940;
            border-radius: 50%;
        }
        #app>div::before{
            display: block;
            content: "";
            position: absolute;
            width: 1px;
            height: 90px;
            background-color: #ccc;
            right:49px;
            bottom: -90px;
            transform: rotate(-5deg);
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script>
    let app = document.getElementById("app");
    // let div = document.createElement("div");
    // app.appendChild(div);
    function creatBall(){
        let div = document.createElement("div");
        // console.log(screen.width);
        // console.log(screen.height);
        let width=Math.random()*(screen.width-100)
        let height =Math.random()*(900-600)+300
        div.style.left=width+'px'
        div.style.top=height+'px'
        div.style.backgroundColor = '#'+Math.random().toString(16).substring(3,9)
        div.timer=setInterval(()=>{
            if(height>0){
                let top=Math.random()*4+2
                height -=top;
                div.style.top=height+'px'
            }else{
                clearInterval(div.timer)
            }
        },30)
        app.appendChild(div);
    }
    let i=1;
    let ir=setInterval(()=>{
        creatBall()
    if(i===100){
        clearInterval(ir);
    }else{
        i++
    }
    },300)
</script>